<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Event Loop</title>
  <style>
    input {
      width: 200px;
      height: 30px;
    }

    input {
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
      outline: none;
      padding: 3px 0 3px 12px;
      margin: 5px 1px 3px 0;
      border: 1px solid #ddd;
      font-size: 18px;
    }

    input:focus {
      box-shadow: 0 0 5px rgba(216, 76, 41, 1);
      padding: 3px 0 3px 12px;
      margin: 5px 1px 3px 0;
      border: 1px solid rgba(216, 76, 41, 1);
    }

    #btn {
      font-size: 18px;
      font-family: Helvetica, Tahoma, Arial;
      line-height: 1em;   /*使用em作为单位，即使字体变化，按钮的整体样式也会按比例跟随变化*/
      color: #fff;
      background: linear-gradient(135deg,#fce,#cce);
      padding: .5em 1.5em;
      border-radius: 2em;
      display: inline-block;
      outline: none;
    }
  </style>
  <script>
    function addCount(el) {
      el.value++
    }

    function modifyAttribute (el) {
      console.log(++el.dataset.count)
    }

    function observe (el, options, callback) {
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
      var observer = new MutationObserver(callback)
      observer.observe(el, options)
    }
    window.onload = () => {
      var text = document.getElementById('text')
      var btn = document.getElementById('btn')
      btn.onclick = (e) => {
        addCount(text)
        modifyAttribute(text)
      }
      var options = {
        childList: true,
        subtree: true,
        attributes: true,
        attributeOldValue: true,
        characterData: true
      }
      observe(text, options, (records, instance) => {
        console.log(records)
        console.log(instance)
        records.map(record => {
          console.log('Mutation Type: ' + record.type)
          console.log('Mutation Change Attribute: ' + record.attributeName)
          console.log('Previous attribute value: ' + record.oldValue)
        })
      })


    }
  </script>
</head>
<body>
  <input type="text" id="text" value="0" data-count="0">
  <button id="btn">增加</button>
</body>
</html>